{% extends "base.html" %}
{% load static %}
{% load analysis_filters %}

{% block title %}薄弱知识点分析 - ExamPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'analysis/css/weak_points_list.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4 mb-5">
    <!-- 页面头部 -->
    <div class="weak-points-header fade-in-up">
        <div class="row align-items-center">
            <div class="col-md-8">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="{% url 'analysis:profile_dashboard' %}">知识点画像</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">薄弱知识点</li>
                    </ol>
                </nav>
                <h1 class="mb-2">
                    <i class="fas fa-exclamation-triangle me-2"></i>薄弱知识点分析
                </h1>
                <p class="mb-0 opacity-75">
                    发现学习中的薄弱环节，针对性提升学习效果
                </p>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="btn-group">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>返回仪表板
                    </a>
                    <button id="exportWeakPoints" class="btn btn-light btn-sm">
                        <i class="fas fa-download me-1"></i>导出数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 阈值指示器 -->
    <div class="threshold-indicator fade-in-up">
        <i class="fas fa-info-circle text-warning"></i>
        <div class="flex-grow-1">
            <strong>当前阈值设置：</strong>
            <span class="threshold-value">{{ threshold|multiply:100|floatformat:0 }}%</span>
            <span class="text-muted">（掌握度低于此值视为薄弱知识点）</span>
        </div>
    </div>

    <!-- 统计概览 -->
    <div class="weak-stats-grid fade-in-up">
        <div class="weak-stat-card">
            <div class="weak-stat-icon bg-danger">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="weak-stat-value text-danger">{{ total_weak_points }}</div>
            <div class="weak-stat-label">薄弱知识点总数</div>
        </div>
        
        <div class="weak-stat-card">
            <div class="weak-stat-icon bg-warning">
                <i class="fas fa-books"></i>
            </div>
            <div class="weak-stat-value text-warning">{{ subject_stats|length }}</div>
            <div class="weak-stat-label">涉及科目数量</div>
        </div>
        
        <div class="weak-stat-card">
            <div class="weak-stat-icon bg-info">
                <i class="fas fa-chart-line"></i>
            </div>
            <div class="weak-stat-value text-info">
                {{ weak_points|length|default:0 }}/{{ page_obj.paginator.count|default:weak_points|length }}
            </div>
            <div class="weak-stat-label">当前显示/总数</div>
        </div>
        
        <div class="weak-stat-card">
            <div class="weak-stat-icon bg-secondary">
                <i class="fas fa-percentage"></i>
            </div>
            <div class="weak-stat-value text-secondary">
                {% with total=page_obj.paginator.count|default:weak_points|length %}
                    {% if total > 0 %}
                        {{ total_weak_points|divide:total|multiply:100|floatformat:1 }}%
                    {% else %}
                        0%
                    {% endif %}
                {% endwith %}
            </div>
            <div class="weak-stat-label">薄弱知识点占比</div>
        </div>
    </div>

    <!-- 科目统计 -->
    {% if subject_stats %}
    <div class="subject-stats-card fade-in-up">
        <div class="card-header" style="border-bottom: 2px solid #f8f9fa; padding: 0 0 1rem 0; margin: 0 0 1rem 0;">
            <h3 class="card-title mb-0">
                <i class="fas fa-layer-group text-primary me-2"></i>科目分布统计
            </h3>
        </div>
        <div class="subject-stats-grid">
            {% for subject_name, count in subject_stats.items %}
            <div class="subject-stat-item cursor-pointer" data-subject-id="{{ subject_name|get_subject_id }}">
                <div class="subject-icon" style="background: {{ subject_name|get_subject_color }};">
                    <i class="fas fa-book"></i>
                </div>
                <div class="subject-info">
                    <div class="subject-name">{{ subject_name }}</div>
                    <div class="subject-count">{{ count }} 个薄弱点</div>
                </div>
                <i class="fas fa-chevron-right text-muted"></i>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- 筛选控件 -->
    <div class="filter-card fade-in-up">
        <div class="filter-row">
            <div class="filter-group">
                <label class="filter-label">掌握度阈值</label>
                <div class="d-flex align-items-center gap-2">
                    <input type="range" class="form-range" id="thresholdSlider" 
                           min="10" max="90" step="5" value="{{ threshold|multiply:100|floatformat:0 }}">
                    <span class="badge bg-primary" id="thresholdValue">{{ threshold|multiply:100|floatformat:0 }}%</span>
                </div>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">搜索知识点</label>
                <input type="text" class="form-control" id="searchWeakPoints" 
                       placeholder="输入知识点名称...">
            </div>
            
            <div class="filter-group">
                <label class="filter-label">排序方式</label>
                <select class="form-select" id="sortWeakPoints">
                    <option value="mastery-asc">掌握度升序</option>
                    <option value="mastery-desc">掌握度降序</option>
                    <option value="name-asc">名称升序</option>
                    <option value="name-desc">名称降序</option>
                </select>
            </div>
            
            <div class="filter-group">
                <label class="filter-label">&nbsp;</label>
                <div class="d-flex gap-2">
                    <button id="applyFilters" class="btn btn-primary flex-grow-1">
                        <i class="fas fa-filter me-1"></i>应用筛选
                    </button>
                    <button id="resetFilters" class="btn btn-outline-secondary">
                        <i class="fas fa-redo me-1"></i>重置
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 薄弱知识点列表 -->
    <div class="weak-points-list">
        {% if weak_points %}
            {% for weak_point in weak_points %}
            <div class="weak-point-card fade-in-up" 
                 data-knowledge-id="{{ weak_point.id }}"
                 data-mastery="{{ weak_point.mastery_level }}">
                <div class="weak-point-header">
                    <div class="weak-point-info">
                        <h3 class="weak-point-name">
                            <i class="fas fa-brain text-danger me-2"></i>
                            <a href="{% url 'analysis:knowledge_point_detail' weak_point.id %}" 
                               class="text-decoration-none text-dark">
                                {{ weak_point.knowledge_point.name }}
                            </a>
                        </h3>
                        <div class="weak-point-meta">
                            <div class="weak-point-meta-item">
                                <i class="fas fa-book text-muted"></i>
                                <span>{{ weak_point.knowledge_point.subject.name }}</span>
                            </div>
                            <div class="weak-point-meta-item">
                                <i class="fas fa-clock text-muted"></i>
                                <span>最后练习: {{ weak_point.updated_at|date:"Y-m-d"|default:"暂无" }}</span>
                            </div>
                            <div class="weak-point-meta-item">
                                <i class="fas fa-chart-line text-muted"></i>
                                <span>学习状态: {{ weak_point.get_learning_status_display }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="weak-point-mastery">
                        <div class="mastery-value text-danger">
                            {{ weak_point.mastery_level|multiply:100|floatformat:0 }}%
                        </div>
                    </div>
                </div>
                
                <div class="mastery-indicator">
                    <div class="mastery-progress">
                        <div class="mastery-progress-bar bg-danger" 
                             style="width: {{ weak_point.mastery_level|multiply:100 }}%">
                        </div>
                    </div>
                    <div class="mastery-value text-danger">
                        {{ weak_point.mastery_level|multiply:100|floatformat:0 }}%
                    </div>
                </div>
                
                <div class="weak-point-actions">
                    <a href="{% url 'analysis:knowledge_point_detail' weak_point.id %}" 
                       class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-info-circle me-1"></i>查看详情
                    </a>
                    <button class="btn btn-danger btn-sm study-btn" 
                            data-knowledge-id="{{ weak_point.id }}">
                        <i class="fas fa-play me-1"></i>立即学习
                    </button>
                    <a href="{% url 'analysis:subject_profile' weak_point.knowledge_point.subject.id %}" 
                       class="btn btn-outline-info btn-sm">
                        <i class="fas fa-layer-group me-1"></i>科目分析
                    </a>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <!-- 空状态 -->
            <div class="empty-state fade-in-up">
                <div class="empty-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <h3 class="empty-title">恭喜！暂无薄弱知识点</h3>
                <p class="empty-description">
                    当前阈值设置下，您没有需要特别关注的薄弱知识点。
                </p>
                <div class="d-flex gap-2 justify-content-center">
                    <a href="{% url 'analysis:profile_dashboard' %}" class="btn btn-primary">
                        <i class="fas fa-tachometer-alt me-1"></i>返回仪表板
                    </a>
                    <button id="adjustThreshold" class="btn btn-outline-secondary">
                        <i class="fas fa-sliders-h me-1"></i>调整阈值
                    </button>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- 分页 -->
    {% if page_obj and page_obj.paginator.num_pages > 1 %}
    <div class="pagination-container fade-in-up">
        <nav>
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">首页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">上一页</a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">下一页</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% for key,value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">末页</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'analysis/js/weak_points_list.js' %}"></script>
{% endblock %}